<template>
    <el-form ref="form" label-width="80px" size="mini" label-position="top">

        <el-form-item label="主题样式">
            <div class="nav-theme-list">
                <div class="nav-theme" v-for="theme in themes" @click="handleThemeSelect(theme)"
                     :class="{ 'active': theme.theme == item.setting.navTheme}">
                    <img :src="'/assets/images/navs/' + theme.name + '.jpg'" />
                </div>
            </div>
        </el-form-item>

        <el-dialog
                title="选择导航主题"
                width="800px"
                top="15px" :append-to-body="true"
                :visible.sync="selNavThemeWin"
                :before-close="handleClose">
            <el-tabs @tab-click="handleClick" v-model="curGridMode">
                <el-tab-pane label="标准排列" name="normal">
                    <el-row :gutter="20">
                        <el-col :span="6" v-for="n in NORMALS" :key="n">
                            <div class="nav-theme-win-item fa fa-check" @click="select(n)"
                                 :class="{ 'selected': sourceNav.theme === n, 'active': theme === n }">
                                <img :src="'/assets/imgs/navtheme/' + n + '.jpg'" />
                            </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="混合排列" name="mix">
                    <el-row :gutter="20">
                        <el-col :span="6" v-for="m in MIXS" :key="m">
                            <div class="nav-theme-win-item" @click="select(m)"
                                 :class="{ 'selected': sourceNav.theme === m, 'active': theme === m }">
                                <img :src="'/assets/imgs/navtheme/' + m + '.jpg'" />
                            </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="ok()">确 定</el-button>
            </span>
        </el-dialog>
    </el-form>
</template>


<script setup>
import {ref, reactive, computed, watch, onMounted, toRefs} from 'vue'
import _ from 'lodash'

// 定义 props
const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})

// 定义 emits
const emit = defineEmits(['update:item'])

// 状态
const {
  selNavThemeWin,
  curGridMode,
  gridMode,
  theme,
  sourceNav,
  NORMALS,
  MIXS,
  themes
} = toRefs(reactive({
  selNavThemeWin: false,
  curGridMode: 'normal', // normal, mix
  gridMode: 'normal',
  theme: '',
  sourceNav: {
    gridMode: '', // normal, mix
    theme: ''
  },
  NORMALS: ['n1', 'n2', 'n3', 'n4', 'n5', 'n6', 'n7', 'n8', 'n9', 'n10', 'n11', 'n12'],
  MIXS: ['m1', 'm2', 'm3', 'm4', 'm5', 'm6'],
  themes: [
    {
      name: 'n2',
      theme: ''
    },
    {
      name: 'n9',
      theme: 'jzl-nav-theme-n1'
    },
    {
      name: 'n10',
      theme: 'jzl-nav-theme-n2'
    },
    {
      name: 'n3',
      theme: 'jzl-nav-theme-n3'
    }
  ]
}))

// 方法实现
const handleThemeSelect = (themeInfo) => {
  const theme = _.get(themeInfo, 'theme')

  // 更新 item.setting.navTheme
  if (props.item && props.item.setting) {
    props.item.setting.navTheme = theme
  } else {
    props.item.setting = {
      navTheme: theme
    }
  }

  // 触发更新事件
  emit('update:item', props.item)
}

</script>
